<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" href="/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/frame/static/css/style.css">
    <link rel="icon" href="/frame/static/image/code.png">
</head>
<body class="body">

<div class="layui-row layui-col-space10 my-index-main">
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-btn-danger layui-icon">&#xe756;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">4000</p>
                <p class="my-nav-text layui-elip">销售额</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-btn-warm layui-icon">&#xe735;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">40</p>
                <p class="my-nav-text layui-elip">昨日销售额</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-icon">&#xe715;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">400</p>
                <p class="my-nav-text layui-elip">本周销售额</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-btn-normal layui-icon">&#xe705;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">100</p>
                <p class="my-nav-text layui-elip">本月销售额</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-btn-normal layui-icon">&#xe705;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">100</p>
                <p class="my-nav-text layui-elip">销量</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2">
        <div class="my-nav-btn layui-clear">
            <div class="layui-row">
                <button class="layui-btn layui-btn-big layui-btn-normal layui-icon">&#xe705;</button>
            </div>
            <div class="layui-row tc">
                <p class="my-nav-text">100</p>
                <p class="my-nav-text layui-elip">商品总数</p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">库存</h2>
                <div class="layui-colla-content layui-show">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>商品数量</th>
                            <th>上次进货时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>防水胶带</td>
                            <td>200</td>
                            <td>1989-10-14</td>
                            <td>添加库存</td>
                        </tr>
                        <tr>
                            <td>防水胶带</td>
                            <td>200</td>
                            <td>1989-10-14</td>
                            <td>添加库存</td>
                        </tr><tr>
                            <td>防水胶带</td>
                            <td>200</td>
                            <td>1989-10-14</td>
                            <td>添加库存</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">未付款订单</h2>
                <div class="layui-colla-content layui-show">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>商品数量</th>
                            <th>下单人</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>防水胶带</td>
                            <td>2</td>
                            <td>张旭辉</td>
                            <td>查看详情</td>
                        </tr>
                        <tr>
                            <td>防水胶带</td>
                            <td>2</td>
                            <td>张旭辉</td>
                            <td>查看详情</td>
                        </tr>
                        <tr>
                            <td>防水胶带</td>
                            <td>2</td>
                            <td>张旭辉</td>
                            <td>查看详情</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">今日销量饼图</h2>
                <div class="layui-colla-content layui-show" >
                    <div id="day-bing" style="height: 450px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">本周销售额</h2>
                <div class="layui-colla-content layui-show">

                    <div id="main-line" style="height: 450px;"></div>

                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">本周销量</h2>
                <div class="layui-colla-content layui-show">
                    <div id="main-bing" style="height: 450px;">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/frame/layui/layui.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script type="text/javascript" src="/frame/echarts/echarts.min.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTab = layui.vip_tab
                , element = layui.element
                , $ = layui.jquery;

        var day = echarts.init(document.getElementById('main-bing'));

        day.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['九头蛇', '电动工具','螺丝刀','磨片','螺丝']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            series: [
                {
                    name: '九头蛇',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '电动工具',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '螺丝刀',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '磨片',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name: '螺丝',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        });


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '本周销售额',
            },
            tooltip: {},
            legend: {
                data: ['销售额']
            },
            xAxis: {
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
            },
            yAxis: {},
            series: [{
                name: '销售额',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,50]
            }]
        });

        // 基于准备好的dom，初始化echarts实例
        var chart = echarts.init(document.getElementById('day-bing'));

        // 配置
        chart.setOption({
            title : {
                text: '今日销量饼图',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['九头鸟','瑞奇','磨片','电焊机','螺丝刀']
            },
            series : [
                {
                    name: '销量',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:400, name:'九头鸟'},
                        {value:335, name:'瑞奇'},
                        {value:310, name:'磨片'},
                        {value:274, name:'电焊机'},
                        {value:235, name:'螺丝刀'}
                    ]
                }
            ]
        });
        // 打开选项卡
        $('.my-nav-btn').on('click', function(){
            if($(this).attr('data-href')){
                //vipTab.add('','标题','路径');
                vipTab.add($(this),'<i class="layui-icon">'+$(this).find("button").html()+'</i>'+$(this).find('p:last-child').html(),$(this).attr('data-href'));
            }
        });

        // you code ...


    });
</script>
</body>
</html>